<script lang="ts" setup>
const emit = defineEmits(['close'])
const { sourceCdnUrl } = useRuntimeConfig().public

// 跳转下载
async function handleDownload() {
  const loading = showLoadingToast({
    duration: 0,
    message: 'Download...',
  })
  const { Data } = await useRequest.post('/AppByChannel')
  if (Data?.url) {
    const link = document.createElement('a')
    link.href = `${sourceCdnUrl}${Data.url}`
    link.setAttribute('download', Data.filename)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } else {
    showToast('download falied')
  }
  loading.close()
  emit('close')
}
</script>

<template>
  <div class="download-popup">
    <div class="download-box">
      <div class="app-info">
        <div class="logo"></div>
        <div class="info">
          <div class="name">Shorts TV</div>
          <div class="tips">You have not installed the app yet. Please download and install.</div>
        </div>
      </div>

      <div
        class="download-btn"
        @click="handleDownload">
        Download
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.download-popup {
  .download-box {
    width: 268px;
    padding: 30px 24px;
    border-radius: 12px;
    z-index: 999;
    background: #21202f;
    .app-info {
      @include flexbox();
      margin-bottom: 20px;
      .logo {
        flex-shrink: 0;
        width: 64px;
        height: 64px;
        line-height: 64px;
        margin-right: 24px;
        text-align: center;
        border-radius: 16px;
        background-color: $primary-color;
        @include bgimg(contain, 'logo.png');
      }
      .info {
        .name {
          font-size: 15px;
          font-weight: 500;
          margin-bottom: 10px;
          color: #fff;
        }
        .tips {
          color: #d3d2d7;
          font-size: 12px;
        }
      }
    }
    .download-btn {
      @include flexbox($jc: center, $ai: center);
      width: 220px;
      height: 32px;
      color: #fff;
      border-radius: 4px;
      background-color: $primary-color;
      cursor: pointer;
    }
  }
}
</style>
